<template>
  <div class="toast">
    <div class="toast-text" v-show="isShow">{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: "Toast",
  // 普通方式封装
  // props: {
  //   message: {
  //     type: String,
  //     default: "我是一个吐司消息~",
  //   },
  //   isShow: {
  //     type: Boolean,
  //     default: false,
  //   },
  // },

  data() {
    return {
      message: "",
      isShow: 0,
    };
  },

  methods: {
    show(message = "我是吐司消息~", duration = 2000) {
      this.isShow = true;
      this.message = message;

      setTimeout(() => {
        this.isShow = false;
        this.message = "";
      }, duration);
    },
  },
};
</script>

<style scoped>
.toast-text {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 65%;

  transform: translate(-50%, -50%);

  padding: 10px 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
  color: var(--color-background);
  background-color: rgba(0, 0, 0, 0.7);

  transition: 0.3s;

  z-index: 999;
}
</style>